// 定义变量
@bg-dark: #111111;
@bg-dark-rgb: 17, 17, 17;
@body: #222222;
@body-rgb: 34, 34, 34;
@body-dark: #ffffff;
@body-dark-rgb: 255, 255, 255;
@secondary: #5a5a5a;
@secondary-rgb: 90, 90, 90;
@tertiary: #6c6c6c;
@tertiary-rgb: 108,108,108;
@secondary-dark: #d5d5d5;
@secondary-dark-rgb: 213, 213, 213;
@tertiary-dark: #999999;
@tertiary-dark-rgb: 153, 153, 153;
@primary: #fcac45;
@primary-rgb: 252,172,69;
@px-page: 12vw;  // 响应视口大小
@py-page: 4rem;  // 垂直方向上应该和字体一样遵循静态原则
@py-navbar: 1.25rem;
@rd: 2px;

// 导入字体
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Light.ttf');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.ttf');
    font-weight: normal;
    font-style: italic;
}

// 重设 Bootstrap 变量，能少写很多样式
body, [data-bs-theme=light] {
    font-family: 'Open Sans';
    --bs-body-font-family: 'Open Sans';
    --bs-primary: @primary;
    --bs-secondary-color: @secondary;
    --bs-secondary-color-rgb: @secondary-rgb;
    --bs-primary: @primary;
    --bs-primary-rgb: @primary-rgb;
    --bs-tertiary-color: @tertiary;
    --bs-tertiary-color-rgb: @tertiary-rgb;
    --bs-body-color: @body;
    --bs-body-color-rgb: @body-rgb;
    --bs-border-radius: @rd;
    --bs-border-color: @secondary;
}

// 导航栏
.navbar {
    --bs-navbar-padding-x: @px-page;
    --bs-navbar-padding-y: @py-navbar;
    --bs-nav-link-font-size: 0.75rem;
}

// 导航栏暗色模式
.navbar[data-bs-theme=dark] {
    --bs-navbar-color: @body-dark;
}

// 暗色模式
[data-bs-theme=dark] {
    --bs-body-bg: @bg-dark;
    --bs-body-bg-rgb: @bg-dark-rgb;
    --bs-body-color: @body-dark;
    --bs-body-color-rgb: @body-dark-rgb;
    --bs-secondary-color: @secondary-dark;
    --bs-secondary-color-rgb: @secondary-dark-rgb;
    --bs-tertiary-color: @tertiary-dark;
    --bs-tertiary-color-rgb: @tertiary-dark-rgb;
}

// 按钮
.btn {
    --bs-btn-border-radius: @rd;
}

// 主题色按钮
.btn-primary {
    --bs-btn-bg: @primary;
    --bs-btn-border-color: @primary;
    @hover-primary: darken(@primary, 10%);
    --bs-btn-hover-bg: @hover-primary;
    --bs-btn-hover-border-color: @hover-primary;
    @active-primary: darken(@hover-primary, 10%);
    --bs-btn-active-bg: @active-primary;
    --bs-btn-active-border-color: @active-primary;
}

// 通用标题下划线（需要搭配 padding-bottom 使用）
.title-underline {
    background: no-repeat bottom url('../images/title-background.png');
    background-size: calc((1.325rem + .9vw) * 2.75);  // 从 Bootstrap 抄来的特殊值
}

// 通用页面边距
.p-page {
    padding: @py-page @px-page;
}

// 通用小方块
.cube {
    aspect-ratio: 1;
    width: 0.75rem;
    background-color: var(--bs-body-color);
}

// Banner 图
#banner {
    height: 100vh;

    // 更多按钮
    .more {
        aspect-ratio: 1;
        --bs-border-color: #c3c3c3;

        .btn {
            color: var(--bs-border-color);
        }
    }
}

// About 关于页面
#about {
    overflow-x: hidden;  // 避免动画超出页面触发滚动条

    .about-us {
        flex: 1 1 25rem;  // 利用弹性伸缩和自动换行实现响应式布局

        // BROWSE OUR WORK 按钮
        .btn {
            padding: 0.75rem 1.25rem;
        }
    }
}

// Team 团队页面
#team {
    // 信息
    .info {
        flex: 1 1 16rem;

        // 头像
        .avatar {
            aspect-ratio: 1;
            width: 7rem;
            background-color: #d7d7d7;
        }
    }
}

// Services 服务页面
#services {
    // 图标
    .icon {
        width: 7rem;
    }

    // 信息
    .info {
        flex: 1 1 16rem;
    }
}

// Testimonials 推荐信页面
#testimonials {
    // 详情
    .detail {
        @mx: max(0px, calc(calc(@px-page - 2.5rem) / 1.75));
        margin-left: @mx;
        margin-right: @mx;
    }
}

// Contact 联系页面
#contact {
    // Tricky：当 @px-page 足够小时禁用额外边距，以适应小宽度视口
    @px: calc(@px-page + max(0px, calc(1.25 * calc(@px-page - 2.5rem))));
    padding-left: @px;
    padding-right: @px;

    // 表单控件
    .flex-input{
        flex: 1 1 20rem;
    }

    // 提示表单必填的上标
    sup {
        color: red;
    }

    // SEND 发送按钮
    .btn {
        @px: 3.25rem;
        padding-left: @px;
        padding-right: @px;
    }

    // 多行输入
    textarea {
        resize: none;
    }
}

// Footer 页脚
footer {
    padding: @py-navbar @px-page;

    // 版权
    .copyright {
        font-size: 0.75rem;
    }

    // 图标
    .icon {
        width: 2rem;
        border-color: #b2b2b2 !important;
    }
}